<!DOCTYPE html>
<html class="ui-page-detail">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="./css/mui.min.css" rel="stylesheet">
		<style>
			.ui-page-detail,
			body {
				width: 100%;
				height: 100%;
				margin: 0px;
				padding: 0px;
				background: #EDECEB;
			}
			
			.mui-content {
				height: 100%;
				background: #EDECEB;
			}
			
			#btnLayout {
				width: 100%;
				background-color: #4554B3;
				float: left;
				padding-bottom: 15px;
				padding-top: 15px;
			}
			
			.mui-btn {
				background: #4554B3;
				height: 40px;
				width: 41%;
				font-size: 14px;
				color: #FFFFFF;
				border-radius: 20px;
				border: 1px solid #6F79BE;
			}
		</style>

	</head>

	<body>

		<header class="mui-bar mui-bar-nav" style="background: #3A46A1;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #FFFFFF;"></a>
			<h1 class="mui-center mui-title" style="color: #FFFFFF; font-size: 20px; font-weight: bolder;">SAGAWA</h1>
		</header>

		<div class="mui-content">

			<div id="btnLayout">

				<button id="cancelBtn" style=" margin-left: 4%; float: left;" class="mui-btn"> CANCEL</button>

				<button id="editBtn" style="margin-right: 4%; float: right; " class="mui-btn"> EDIT</button>

			</div>

		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/http.js"></script>
		<script type="text/javascript">
			(function($, doc) {

				mui.plusReady(function() {

					var self = plus.webview.currentWebview();
					var orderno = self.orderno;
					var orderstatu = self.statu;
					var statu = self.orderStatu;
					var height = '115px';

					var showCancel = true;
					var showEdit = true;

					var cancelBtn = doc.getElementById("cancelBtn");
					var editBtn = doc.getElementById("editBtn");
					var btnLayout = doc.getElementById("btnLayout");

					if(statu < 2020 && statu != 1040) {
						cancelBtn.style.visibility = 'visible';
						showCancel = true;
					} else {
						cancelBtn.style.visibility = 'hidden';
						showCancel = false;
					}

					if(statu == 1040 || statu >= 2020) {
						editBtn.style.visibility = 'hidden';
						showEdit = false;
					} else {
						editBtn.style.visibility = 'visible';
						showEdit = true;
					}

					if(!showCancel && !showEdit) {
						btnLayout.style.visibility = 'hidden';
						btnLayout.style.height = "0px";
						btnLayout.style.display = "none";
						height = '45px';
					}

					mui.init({
						subpages: [{
							url: 'orderInfo.html',
							id: 'orderInfo',
							styles: {
								top: height, //mui标题栏默认高度为45px；
								bottom: '0px'
							},
							extras: {
								orderNo: orderno,
								statu: orderstatu
							}
						}]
					});

					cancelBtn.addEventListener('tap', function(e) {
						e.detail.gesture.preventDefault();
						var btnArray = ['Close', 'Submit'];
						mui.prompt('Order No：' + orderno, 'Please input your remark here.', 'Cancel Order', btnArray, function(e) {
							if(e.index == 1) {
								console.log("确认删除订单");
								cancelOrder(e.value);
							} else {
								console.log("你点了取消按钮");
							}
						})
					});

					editBtn.addEventListener('tap', function(event) {
						$.openWindow({
							url: 'edit.html',
							id: 'edit',
							extras: {
								orderNo: orderno
							},
							preload: false,
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					}, false);

					var cancelOrder = function(orderRemark) {

						var orderNo = "'" + orderno + "'";
						var postdata = {
							action: "pickup",
							orderno: orderNo,
							status: "1040",
							remarks: orderRemark,
							token: 'f416b7333f412805f5f1def594bdcf93'
						};

						http.asyncHttp('updateOrderStatus.jsp', postdata, function(result) {
								if(result.match("success") != null) {
									plus.nativeUI.toast(orderno + ' order was cancelled successfully.');
									var ws = plus.webview.currentWebview();
									plus.webview.close(ws);
								} else {
									plus.nativeUI.toast('Failed to cancel order.');
								}

							},
							function(err) {
								plus.nativeUI.toast("请求出错了");
							});
					};

				});

			}(mui, document));
		</script>

	</body>

</html>